<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/login.css">
</head>

<body>
    <div id="login">
        <!-- logo -->
        <div class="logo">
            <img src="./images/logo.jpg" alt="">
        </div>

        <!-- 侧边栏 -->
        <div class="aside">
            <div class="adv">
                <img src="./images/aside.jpg" alt="">
            </div>
            <div class="intro">
                <h2>
                    1.1亿注册会员
                </h2>
                <p class="small">给你千万里挑一的机会</p>
                <span>
                    美国纳斯达克上市公司
                </span>
                <p class="small">
                    寻爱路上为你保驾护航
                </p>
                <h2>
                    成功率高
                </h2>
                <p class="small">
                    千万成功会员，见证幸福
                </p>
            </div>
        </div>

        <!-- 头部 -->
        <div class="header">
            <div class="h-left">
                <img src="./images/left.jpg" alt="">
            </div>
            <div class="h-right">
                <img src="./images/right.jpg" alt="">
            </div>
            <p class="title">
                一分钟快速注册，青春不常在，抓紧谈恋爱
            </p>
        </div>

        <!-- 注册内容 -->
        <div class="content">
            <form action="#" method="get">
                <div class="content-top clearfix">
                    <!-- 性别 -->
                    <div class="sex fl">
                        <span class="tip">我是</span>
                        <input type="radio" name="sex" id="man" value="man">
                        <label for="man">
                            <i class="iconfont icon-nan"></i>
                            男
                        </label>
                        <input type="radio" name="sex" id="woman" value="woman">
                        <label for="woman">
                            <i class="iconfont icon-nv"></i>
                            女
                        </label>
                    </div>
                    <p class="nochange fr">
                        * 注册后不可更改
                    </p>

                    <!-- 生日 -->
                    <div class="bir ibox fl">
                        <span class="tip">生日</span>
                        <input type="text" name="year" class="bir-box bord">
                        <span class="pos">年</span>
                        <input type="text" name="month" class="bir-box bord">
                        <span class="pos">月</span>
                        <input type="text" name="day" class="bir-box bord">
                        <span class="pos">日</span>
                    </div>
                    <p class="nochange fr setmar">
                        * 注册后不可更改
                    </p>

                    <!-- 常住地 -->
                    <div class="live ibox fl">
                        <span class="tip">常住地</span>
                        <input type="text" name="live" class="bord bord-w">
                    </div>

                    <!-- 婚姻状况 -->
                    <div class="marr ibox fl">
                        <span class="tip">婚姻状况</span>
                        <input type="radio" name="marr" id="marr" value="no">
                        <label for="marr">未婚</label>
                        <input type="radio" name="marr" id="sep" value="sep">
                        <label for="sep">离异</label>
                        <input type="radio" name="marr" id="dead" value="dead">
                        <label for="dead">丧偶</label>
                    </div>

                    <!-- 身高 -->
                    <div class="heig ibox fl">
                        <span class="tip">身高</span>
                        <input type="text" name="heig" class="bord bord-w">
                    </div>

                    <!-- 学历 -->
                    <div class="book ibox fl">
                        <span class="tip">学历</span>
                        <input type="text" name="book" class="bord bord-w">
                    </div>

                    <!-- 月薪 -->
                    <div class="money ibox fl">
                        <span class="tip">月薪</span>
                        <input type="text" name="money" class="bord bord-w">
                    </div>

                </div>

                <div class="content-bot clearfix">
                    <!-- 注册方式 -->
                    <div class="way fl">
                        <span class="tip">注册方式</span>
                        <input type="radio" name="way" id="qq" value="qq">
                        <label for="qq">
                            <i class="iconfont icon-youxiang"></i>
                            邮箱注册
                        </label>
                        <input type="radio" name="way" id="ph" value="ph">
                        <label for="ph">
                            <i class="iconfont icon-ad79"></i>
                            手机注册
                        </label>
                    </div>

                    <!-- 手机号 -->
                    <div class="phone ibox fl">
                        <span class="tip">手机号</span>
                        <input type="text" name="phone" class="bord bord-w">
                    </div>

                    <!-- 验证码 -->
                    <div class="code ibox fl">
                        <span class="tip">验证码</span>
                        <input type="text" name="code" class="bord bord-w">
                    </div>

                    <!-- 创建密码 -->
                    <div class="pwd ibox fl">
                        <span class="tip">创建密码</span>
                        <input type="password" name="pwd" class="bord bord-w">
                    </div>

                    <!-- 昵称 -->
                    <div class="call ibox fl">
                        <span class="tip">昵称</span>
                        <input type="password" name="call" class="bord bord-w">
                    </div>

                    <!-- 自我介绍 -->
                    <div class="self fl">
                        <span class="tip fl">自我介绍</span>
                        <ul class="self-list clearfix">
                            <li>
                                <a href="#">
                                    贴标签
                                </a>
                                <div class="tie-box">
                                    <p>
                                        请至少选择3个标签，别担心，你可以稍后进行修改！
                                    </p>
                                    <div class="tag-box">
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                        <span class="tag fl">
                                            执着
                                        </span>
                                    </div>
                                    <span class="change fr">
                                        <i class="iconfont icon-huanyizu"></i>
                                        换一组
                                    </span>
                                </div>
                            </li>
                            <li>
                                <a href="#">
                                    自己写
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    帮你写
                                </a>
                            </li>
                            <span class="more fr">
                                <a href="#">
                                    看别人怎么写
                                </a>
                            </span>
                        </ul>
                    </div>

                    <!-- 免费注册 -->
                    <div class="free-login fl">
                        <input class="free" type="submit" value="免费注册">
                    </div>

                    <!-- 条款 -->
                    <div class="tk fl">
                        <span>
                            <input type="checkbox" class="check">
                            我同意注册条款和会员加入标准
                        </span>
                    </div>

                    <!-- 创建 -->
                    <div class="cj fl">
                        <span>
                            <input type="checkbox" class="check">
                            同时创建旗下全认证婚恋网站爱真心账号
                        </span>
                    </div>

                    <!-- 18岁 -->
                    <p class="age fl">我承诺年满18岁、单身、抱着严肃的态度，真诚寻找另一半</p>
                </div>
            </form>
        </div>
    </div>

    <!-- 底部内容 -->
    <div class="footer">
        <p>
            中文实名：世纪佳缘ICP证书：沪B2-20100074 Copyright 。2003-2015版权所有
        </p>
    </div>
</body>

</html>